<script setup>
const tabList = ref([
  { title: '线索管理', icon: '/images/icon/xsgl4.png', type: 1 },
  { title: '房源管理', icon: '/images/icon/fygl1.png', type: 2 },
  { title: '财务管理', icon: '/images/icon/cwgl3.png', type: 3 },
  { title: '合约管理', icon: '/images/icon/hygl2.png', type: 4 },
  { title: '客户管理', icon: '/images/icon/khgl.png', type: 5 },
  { title: '短租管理', icon: '/images/icon/dzgl6.png', type: 6 },
  { title: '多径管理', icon: '/images/icon/fjgl7.png', type: 7 },
  { title: '巡房管理', icon: '/images/icon/xfgl8.png', type: 8 },
  { title: '物资管理', icon: '/images/icon/zcgl9.png', type: 9 }
])
const descList = ref([
  { title: '线索管理', titleDesc: '获客难，线索跟进混乱，如何高效管理客户线索？', desc: '让公客、私客；公盘、私盘；客户线索跟进管理，不再是一件头疼的事', layout: 'left', type: 1 },
  { title: '房源管理', titleDesc: '房源信息杂乱，如何实时掌握出租和空置情况？', desc: '让你告别excel，清晰查看出租情况、出租率统计、空置情况', layout: 'right', type: 2 },
  {
    title: '财务管理',
    titleDesc: '账单处理复杂，如何高效管理财务收支？',
    desc: '让账单流水一览、收支一目了然；自动催缴、代付、线上退款、空中分账，满足你所有想象；收据、发票，一站式解决',
    layout: 'left',
    type: 3
  },
  {
    title: '合约管理',
    titleDesc: '合同管理繁琐，如何简化签约流程？',
    desc: '支持预定协议、租客合同、业主合同、退租协议、大平台电子签约，告别繁杂的纸质文件；自定义合同模板，每个门店的都可以不一样。支持你玩大客户合同，完善宿舍管理模式',
    layout: 'right',
    type: 4
  },
  {
    title: '客户管理',
    titleDesc: '客户信息分散且混乱，如何管理客户资料并精准跟踪需求？',
    desc: '让个人客户、企业客户，所有客户信息一目了然；集中管理客户资料，跟踪客户需求，提供个性化服务，提升客户满意度',
    layout: 'left',
    type: 5
  },
  {
    title: '短租管理',
    titleDesc: '空置期损失大，如何优化长短租管理？',
    desc: '旺季长租，淡季短租；减少空置损失，增加额外收入，让你的空置期也不再愁眉苦脸',
    layout: 'right',
    type: 6
  },
  {
    title: '多经管理',
    titleDesc: '多种经营难统筹，如何高效管理多经项目？',
    desc: '健身房、阅览室、停车位、商城……只要你能想到的多种经营空间，这里支持你自定义玩转',
    layout: 'left',
    type: 7
  },
  {
    title: '巡房管理',
    titleDesc: '巡房任务难安排，问题发现不及时？',
    desc: '告别纸质记录，自动生成巡房任务，定期检查房屋状况，及时发现和解决问题，确保房屋始终保持最佳状态',
    layout: 'right',
    type: 8
  },
  {
    title: '物资管理',
    titleDesc: '物资管理混乱、库存不清，如何高效追踪使用情况？',
    desc: '物资、仓储管理全覆盖，所有库存情况一清二楚；实时追踪物资使用情况，优化库存管理，确保物资供应无忧',
    layout: 'left',
    type: 9
  }
])

const { proxy } = getCurrentInstance()

const isShow = ref(true)
let count = 0
let countTimer = null
const currentTab = ref(1)
onMounted(() => {
  countTimer = setInterval(() => {
    count += 1
    if (count === 7) {
      isShow.value = false
    }
    if (count === 8) {
      isShow.value = true
      count = 0
    }
  }, 1000)
  // getDom()
  debounce(getDom(), 1000)
  window.addEventListener('scroll', () => {
    if (proxy.$refs.listBox) {
      if (proxy.$refs.listBox.getBoundingClientRect().top <= 110) {
        proxy.$refs.tab.style.position = 'fixed'
        proxy.$refs.tab.style.transform = 'translateX(-50%)'
        proxy.$refs.tab.style.boxshadow = '0 2px 4px -4px rgba(31,35,41,.02),0 4px 8px rgba(31,35,41,.02),0 4px 16px 4px rgba(31,35,41,.03)'
        proxy.$refs.tab.style.background = '#ffffff'
      } else if (proxy.$refs.listBox.getBoundingClientRect().top >= 110) {
        proxy.$refs.tab.style.position = ''
        proxy.$refs.tab.style.transform = ''
        proxy.$refs.tab.style.boxshadow = ''
        proxy.$refs.tab.style.background = ''
      }
    }
  })
})
function debounce(func, wait) {
  let timeout
  return function (...args) {
    // 如果之前的定时器还存在，则清除它
    if (timeout) {
      clearTimeout(timeout)
    }
    // 设置新的定时器，等待指定的时间间隔后执行函数
    timeout = setTimeout(() => {
      func.apply(this, args) // 注意这里的 this 和 args，它们分别代表原始函数的上下文和参数
    }, wait)
  }
}

function changeTab(item) {
  currentTab.value = item.type
  const anchorId = `type${item.type}`
  const anchor = document.getElementById(anchorId)
  if (anchor) {
    // 滚动到元素
    anchor.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
    // 可选：更新URL，但不触发页面跳转
    // window.history.pushState(null, null, `#${anchorId}`);
  }
}
function getDom() {
  const options = {
    root: null, // 根元素，默认是视窗
    rootMargin: '0px', // 根元素的边距
    threshold: 0.4 // 当目标元素 50% 进入视窗时触发回调
  }

  const observer = new IntersectionObserver(callback, options)

  const targets = proxy.$refs.bg

  // 指定观察目标
  // 如果 targets 是一个数组，为每个元素设置观察器
  if (Array.isArray(targets)) {
    targets.forEach(target => {
      observer.observe(target)
    })
  } else {
    // 如果 targets 不是一个数组（可能是单个元素或未定义），则进行适当处理
    if (targets) {
      observer.observe(targets)
    } else {
      console.error('未找到目标元素')
    }
  }

  // 编写回调函数
  function callback(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 目标元素进入视窗
        entry.target.style.visibility = 'visible'
        countTimer && clearInterval(countTimer)
        isShow.value = false
        setTimeout(() => {
          entry.target.classList.add('bg-animal')
          isShow.value = true
        }, 0)
      } else {
        // 目标元素离开视窗
        entry.target.style.visibility = 'hidden'
        // isShow.value = false
        countTimer && clearInterval(countTimer)
        setTimeout(() => {
          entry.target.classList.remove('bg-animal')
          // isShow.value = true
        }, 0)
      }
    })
  }
}
onUnmounted(() => {
  countTimer && clearInterval(countTimer)
})
</script>

<template>
  <section class="ym1000 flex flex-col justify-center items-center mt-50px">
    <div class="500 text-40px mb-100px mt-100px">业务套件，为组织构建数字化运营场景</div>
    <div ref="tab" class="w-1200px h-54px flex justify-between items-center cursor-pointer" style="border-bottom: 1px solid #e8e8e8; top: 60px; left: 50%; z-index: 999">
      <div v-for="item in tabList" :key="item.type" class="item flex justify-center items-center" :class="{ active: currentTab === item.type }" style="height: 100%" @click="changeTab(item)">
        <img :src="item.icon" alt="" class="w-28px h-28px mr-8px" />
        <div class="text-18px">{{ item.title }}</div>
      </div>
    </div>
    <div ref="listBox" class="w-1200px">
      <div v-for="(v, i) in descList" :id="`type${v.type}`" :key="i" class="w-100% flex mt-100px" :class="{ 'flex-row-reverse': v.layout === 'right' }">
        <div class="flex flex-1 flex flex-col justify-center items-start">
          <div style="background: #e1edff; color: #0a87f8" class="h-37px 400 text-18px leading-37px px-15px rounded-8px" :class="{ 'ml-50px': v.layout === 'right' }">{{ v.titleDesc }}</div>
          <div class="500 text-36px mt-20px mb-14px" :class="{ 'ml-50px': v.layout === 'right' }">{{ v.title }}</div>
          <div class="400 leading-25px" style="color: #777; width: 98%; font-size: 18px; letter-spacing: 0.6px" :class="{ 'ml-50px': v.layout === 'right' }">{{ v.desc }}</div>
          <div class="flex mt-20px z-99" :class="{ 'ml-50px': v.layout === 'right' }">
            <NuxtLink class="full-btn w-152px h-50px leading-50px rounded-8px text-size-18px" to="https://saas.byteox.com/#/login">免费试用</NuxtLink>
            <NuxtLink class="white-btn w-152px h-50px leading-50px text-size-18px border-hex-0A87F8 border-solid border-1px rounded-8px ml-16px">预约演示</NuxtLink>
          </div>
        </div>
        <div ref="bg" class="bg flex flex-1 relative">
          <div v-if="isShow && v.title === '线索管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="xsgl1" src="/public/images/home/solution/xsgl1.png" alt="线索管理" />
            <img class="xsgl2" src="/public/images/home/solution/xsgl2.png" alt="线索2" />
            <img class="xsgl-icon" src="/public/images/home/solution/xsgl-icon.png" alt="线索管理" />
          </div>

          <div v-if="isShow && v.title === '房源管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="fygl1" src="/public/images/home/solution/fygl1.png" alt="房源管理" />
            <img class="fygl2" src="/public/images/home/solution/fygl2.png" alt="房源管理" />
          </div>

          <div v-if="isShow && v.title === '财务管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="cwgl1" src="/public/images/home/solution/cwgl1.png" alt="财务管理" />
            <img class="cwgl2" src="/public/images/home/solution/cwgl2.png" alt="财务管理" />
            <img class="cwgl-icon" src="/public/images/home/solution/cwgl.png" alt="财务管理" />
            <img class="cwgl3" src="/public/images/home/solution/cwgl3.png" alt="财务管理" />
          </div>

          <div v-if="isShow && v.title === '合约管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="xsgl1" src="/public/images/home/solution/hygl1.png" alt="财务管理" />
            <img class="xsgl2" src="/public/images/home/solution/hygl2.png" alt="财务管理" />
            <img class="xsgl-icon" src="/public/images/home/solution/hygl-icon.png" alt="财务管理" />
          </div>

          <div v-if="isShow && v.title === '客户管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="khgl1" src="/public/images/home/solution/khgl1.png" alt="客户管理" />
            <img class="khgl2" src="/public/images/home/solution/khgl2.png" alt="客户管理" />
            <img class="khgl-icon" src="/public/images/home/solution/khgl-icon.png" alt="客户管理" />
          </div>

          <div v-if="isShow && v.title === '短租管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="dzgl1" src="/public/images/home/solution/dzgl1.png" alt="短租管理" />
            <img class="dzgl2" src="/public/images/home/solution/dzgl2.png" alt="短租管理" />
            <img class="dzgl-icon" src="/public/images/home/solution/dzgl-icon.png" alt="短租管理" />
          </div>

          <div v-if="isShow && v.title === '多经管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="djgl1" src="/public/images/home/solution/djgl1.png" alt="多经管理" />
            <img class="djgl2" src="/public/images/home/solution/djgl2.png" alt="多经管理" />
            <img class="djgl-icon" src="/public/images/home/solution/djgl-icon.png" alt="多经管理" />
          </div>

          <div v-if="isShow && v.title === '巡房管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="xsgl" class="xfgl1" src="/public/images/home/solution/xfgl1.png" alt="巡房管理" />
            <img class="xfgl2" src="/public/images/home/solution/xfgl2.png" alt="巡房管理" />
            <img class="xfgl-icon" src="/public/images/home/solution/xfgl-icon.png" alt="巡房管理" />
          </div>

          <div v-if="isShow && v.title === '物资管理'" class="relative bg-box" style="width: 100%; height: 100%">
            <img ref="wzgl" class="wzgl1" src="/public/images/home/solution/wzgl1.png" alt="物资管理" />
            <img class="wzgl2" src="/public/images/home/solution/wzgl2.png" alt="物资管理" />
            <img class="wzgl-icon" src="/public/images/home/solution/wzgl-icon.png" alt="物资管理" />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.active {
  color: #0a87f8;
  border-bottom: 1px solid #0a87f8;
}
@keyframes box-animation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0.2;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.bg {
  height: 360px;
  background: url('/public/images/home/solution/bg.png') no-repeat 0 0;
  background-size: 100% 100%;
  /* animation: bg 1s forwards; */
}
.bg-animal {
  animation: bg 1s forwards;
}
.bg-box-animal {
  animation: box-animation 0.1s ease-out 6s 1 normal forwards;
}

@keyframes item-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.xsgl1 {
  opacity: 1;
  @apply w-507px h-374px absolute -left-40px -top-40px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.xsgl2 {
  opacity: 0;
  @apply w-300px h-185px absolute right-40px bottom-40px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.xsgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute right-140px -top-30px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.fygl1 {
  opacity: 1;
  @apply w-616px h-384px absolute -left-40px -top-40px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.fygl2 {
  opacity: 0;
  @apply w-300px h-159px absolute right-40px bottom-40px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}

.cwgl1 {
  opacity: 1;
  @apply w-544px h-374px absolute -left-40px -top-20px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.cwgl2 {
  opacity: 0;
  @apply w-224px h-218px absolute right-40px bottom-70px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.cwgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute left-140px -top-30px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}
.cwgl3 {
  opacity: 0;
  @apply w-442px h-98px absolute left-40px bottom-0px z-1;
  animation: item-animation 0.5s ease-out 1.5s 1 normal forwards;
}

.khgl1 {
  opacity: 1;
  @apply w-544px h-374px absolute -left-40px top-40px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.khgl2 {
  opacity: 0;
  @apply w-224px h-218px absolute right-40px bottom-80px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.khgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute left-100px top-40px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.dzgl1 {
  opacity: 1;
  @apply w-555px h-389px absolute -left-40px -top-40px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.dzgl2 {
  opacity: 0;
  @apply w-241px h-201px absolute right-40px bottom-20px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.dzgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute left-100px -top-40px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.djgl1 {
  opacity: 1;
  @apply w-567px h-381px absolute -left-40px -top-40px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.djgl2 {
  opacity: 0;
  @apply w-282px h-195px absolute right-40px bottom-20px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.djgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute right-80px -top-40px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.xfgl1 {
  opacity: 1;
  @apply w-543px h-374px absolute -left-40px top-0px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.xfgl2 {
  opacity: 0;
  @apply w-225px h-218px absolute right-40px bottom-110px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.xfgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute left-100px top-0px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}

.wzgl1 {
  opacity: 1;
  @apply w-544px h-374px absolute -left-40px top-0px z-1;
  /* animation: item-animation 0.5s ease-out 0.5s 1 normal forwards; */
}
.wzgl2 {
  opacity: 0;
  @apply w-224px h-218px absolute right-40px bottom-20px z-1;
  animation: item-animation 0.5s ease-out 0.5s 1 normal forwards;
}
.wzgl-icon {
  opacity: 0;
  @apply w-197px h-197px absolute left-100px top-0px z-1;
  animation: item-animation 0.5s ease-out 1s 1 normal forwards;
}
</style>
